<template>
	<view class="container">
		<block>
			<view class="view-show">
				<view class="topbannerbg"
					:style="business.pics?'background:url('+business.pics+') center no-repeat;background-size:cover;':''">
				</view>
				<view class="topbannerbg2"></view>
				<view class="topbanner">
					<view class="left">
						<image class="img" :src="business.logo" />
					</view>
					<view class="right">
						<view class="f1">{{business.name}}</view>
						<view class="f2">{{business.desc}}</view>
						<!-- <view class="f3"><view class="flex1"></view><view class="t2">收藏<image class="img" src="/static/img/like1.png"/></view></view> -->
					</view>
				</view>
				<view class="navtab">
					<view class="item" :class="st==0?'on':''" @tap="changetab" data-st="0">点外卖<view class="after">
						</view>
					</view>
					<view class="item" :class="st==1?'on':''" @tap="changetab" data-st="1">商家信息<view class="after">
						</view>
					</view>
					<view class="item" :class="st==2?'on':''" @tap="changetab" data-st="2">评价<view class="after"></view>
					</view>
				</view>
				<view v-if="st==0" class="content" style="overflow:hidden;display:flex;margin-top:86rpx"
					:style="{height:'calc(100% - '+(menuindex>-1?460:360)+'rpx)'}">
					<scroll-view v-if="datalist && datalist.length > 0" class="nav_left"
						:scrollWithAnimation="animation" scroll-y="true" :class="menuindex>-1?'tabbarbot':''">
						<block v-for="(item, index) in datalist" :key="index">
							<view class="nav_left_items" :class="index===currentActiveIndex?'active':''"
								@tap="clickRootItem" :data-root-item-id="item.id" :data-root-item-index="index">
								<view class="before"></view>
								{{item.name}}
								<view class="cartnum" v-if="numCat[item.id]>0">{{numCat[item.id]}}</view>
							</view>
						</block>
					</scroll-view>
					<view class="nav_right">
						<view class="nav_right-content">
							<scroll-view @scroll="scroll" class="detail-list" :scrollIntoView="scrollToViewId"
								:scrollWithAnimation="animation" scroll-y="true" :class="menuindex>-1?'tabbarbot':''">
								<view v-for="(detail, index) in datalist" :key="index"
									class="classification-detail-item">
									<view class="head" :data-id="detail.id" :id="'detail-' + detail.id">
										<view class="txt">{{detail.name}}</view>
									</view>
									<view class="product-itemlist">
										<view class="item" v-for="(item,index) in detail.prolist" :key="item.id"
											:class="(item.stock <= 0 || item.stock_daily <= item.sales_daily) ? 'soldout' : ''">
											<view class="product-pic" @click="goto.goods(item.code)"
												:data-url="'product?id='+item.id">
												<image class="image" :src="item.cover" mode="widthFix" />
												<view class="overlay">
													<view class="text">售罄</view>
												</view>
											</view>
											<view class="product-info">
												<view class="p1"><text>{{item.name}}</text></view>
												<view class="p2">
													<text class="t1"><text
															style="font-size:20rpx;padding-right:1px">￥</text>{{item.price_selling}}</text>
													<text class="t2"
														v-if="item.price_market*1 > item.price_selling*1">￥{{item.price_market}}</text>
												</view>
												<view class="p3">
													<view class="p3-1" v-if="item.sales>0"><text
															style="overflow:hidden">已售{{item.sales}}件</text></view>
													<view class="p3-1" v-if="item.limit_start>0"><text
															style="overflow:hidden">{{item.limit_start}}件起售</text>
													</view>
												</view>
												<view class="p4" @click.stop="buydialogChange" :data-proid="item.id">
													<text class="iconfont icon_gouwuche"></text>
												</view>
												<view class="addnum" v-if="item.stock > 0">
													<view v-if="numtotal[item.id]>0" class="minus" @tap.stop="addcart"
														data-num="-1" :data-proid="item.id" :data-stock="item.stock">-
													</view>
													<text v-if="numtotal[item.id]>0"
														class="i">{{numtotal[item.id]}}</text>
													<view class="plus"
														@click.stop="buydialogChange(item.code,item.stock)">+</view>
												</view>

											</view>
										</view>
									</view>
								</view>
							</scroll-view>
							<nodata v-if="nodata"></nodata>
						</view>
					</view>
				</view>
				<view v-if="st==1" class="content1" style="margin-top:86rpx;padding-top:20rpx">
					<view class="item flex-col">
						<text class="t1">联系电话</text>
						<text class="t2"><text v-if="business.linktel">{{business.linktel}}</text><text
								v-else>暂无</text></text>
					</view>
					<view class="item flex-col">
						<text class="t1">商家地址</text>
						<text class="t2"><text v-if="business.address">{{business.address}}</text><text
								v-else>暂无</text></text>
					</view>
					<view class="item flex-col">
						<text class="t1">商家简介</text>
						<text class="t2"><text v-if="business.desc">{{business.desc}}</text><text
								v-else>暂无</text></text>
					</view>
					<view class="item flex-col">
						<text class="t1">营业时间</text>
						<text class="t2">{{business.start_hours}} 至 {{business.end_hours}}</text>
					</view>
					<view class="item flex-col" v-if="business.zhengming && business.zhengming.length > 0">
						<text class="t1">证照公示</text>
						<view id="content_picpreview" class="flex t2" style="flex-wrap:wrap;padding-top:20rpx">
							<view v-for="(item, index) in business.zhengming" :key="index" class="layui-imgbox">
								<view class="layui-imgbox-img">
									<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="st==2" class="content2" style="margin-top:86rpx;padding-top:20rpx">
					<view class="comment">
						<block v-if="commentlist.length>0">
							<view v-for="(item, index) in commentlist" :key="index" class="item">
								<view class="f1">
									<image class="t1" :src="item.headimg" />
									<view class="t2">{{item.nickname}}</view>
									<view class="flex1"></view>
									<view class="t3">
										<image class="img" v-for="(item2,index2) in [0,1,2,3,4]" :key="index2"
											:src="'/static/img/star' + (item.score>item2?'2':'') + '.png'" />
									</view>
								</view>
								<view style="color:#777;font-size:22rpx;">{{item.createtime}}</view>
								<view class="f2">
									<text class="t1">{{item.content}}</text>
									<view class="t2">
										<block v-if="item.content_pic!=''">
											<block v-for="(itemp, index) in item.content_pic" :key="index">
												<view @tap="previewImage" :data-url="itemp"
													:data-urls="item.content_pic">
													<image :src="itemp" mode="widthFix" />
												</view>
											</block>
										</block>
									</view>
								</view>
								<view class="f3" v-if="item.reply_content">
									<view class="arrow"></view>
									<view class="t1">商家回复：{{item.reply_content}}</view>
								</view>
							</view>
						</block>
						<block v-else>
							<nodata v-show="comment_nodata"></nodata>
						</block>
					</view>
				</view>
			</view>
			<view style="height:auto;position:relative;z-index:10076;">
				<view style="width:100%;height:100rpx"></view>
				<view class="footer tn-flex-center-between" :class="menuindex>-1?'tabbarbot':''">
					<view class="cart_ico" @tap.stop="handleClickMask()">
						<image class="img" src="/static/imgs/cart.png" />
						<view class="cartnum" v-if="cartList.total>0">{{cartList.total}}</view>
					</view>
					<view class="text1">合计:<text class="tn-ml-xs tn-type-warning_text">￥</text><text
							class="tn-type-danger_text">{{totalprice}}</text></view>
					<view v-if="cartList.leftprice > 0" class="op" :style="{background:'#888',width:'220rpx'}">
						差{{cartList.leftprice}}元起送</view>
					<view v-else class="op" style="right: 0rpx;" @tap="gopay">去结算</view>
				</view>
			</view>
		</block>
		<uv-popup ref="cartList" mode="bottom" round="8" closeable="true" overlay="false">
			<view class="tn-w-10-12 tn-mt-sm tn-ml-sm tn-flex tn-flex-center-between">
				<view class="tn-grey-disabled_text">
					打包费:<text>￥{{totalpricePack}}</text>
				</view>
				<view>
					<text style="color:#323232;font-weight:bold;font-size:32rpx">购物车</text>
				</view>
				<view>
					<uv-icon size="25" label="清空" color="#CBD5DC" labelColor="#CBD5DC" name="trash"
						@click.top="clearShopCartFn()"></uv-icon>
				</view>
			</view>
			<scroll-view scroll-y class="prolist tn-mb-lg">
				<block v-for="(cart, index) in cartList.list" :key="index">
					<view class="proitem">
						<image :src="cart.specs.gimage?cart.specs.gimage:cart.goods.cover" class="pic flex0">
						</image>
						<view class="con">
							<view class="f1">{{cart.goods.name}}</view>
							<view class="f2">
								{{ showSpec(cart.gspec) }}
							</view>
							<view class="f3" style="color:#ff5555;margin-top:10rpx;font-size:28rpx">
								<!-- ￥{{parseFloat(parseFloat(cart.specs.price_selling) + parseFloat(cart.jlprice)).toFixed(2)}} -->
								￥{{parseFloat(parseFloat(cart.specs.price_selling)).toFixed(2)}}

							</view>
						</view>
						<view class="addnum">
							<view class="minus">
								<image class="img" src="/static/imgs/cart-minus.png" @tap="addcart" data-num="-1"
									:data-proid="cart.proid" :data-ggid="cart.ggid" :data-stock="cart.specs.stock"
									:data-jltitle="cart.jltitle" :data-jlprice="cart.jlprice" />
							</view>
							<text class="i">{{cart.number}}</text>
							<view class="plus">
								<image class="img" src="/static/imgs/cart-plus.png" @tap="addcart" data-num="1"
									:data-proid="cart.proid" :data-ggid="cart.ggid" :data-stock="cart.specs.stock"
									:data-jltitle="cart.jltitle" :data-jlprice="cart.jlprice" />
							</view>
						</view>
					</view>
				</block>
				<block v-if="!cartList.list">
					<text class="nopro">暂时没有商品喔~</text>
				</block>
			</scroll-view>
		</uv-popup>


		<uv-loading-icon :show="loading" color="red" textSize="30rpx"></uv-loading-icon>
		<uv-popup ref="specs" mode="bottom" :closeable="true" round="10rpx" bgColor="#fcfcfc"
			customStyle="overflow:hidden">
			<view class="tn-p-sm relative">
				<view class="flex-x tn-p-sm tn-radius tn-white_bg tn-shadow-md">
					<view class="tn-mr-sm">
						<uv-image width="180rpx" height="180rpx" :fade="true" radius="10rpx" :src="select.gimage" />
					</view>
					<view class="flex-1 flex-y">
						<view class="tn-text-bold" style="font-size:30rpx">{{ goods.name }}</view>
						<view class="flex-x flex-center tn-mt-sm">
							<view>
								<uv-text mode="price" size="35rpx" color="#bf0d0d" :bold="true"
									:text="select.price_selling || goods.price_selling" />
							</view>
							<view v-if="select.gunit" style="font-size:24rpx;color:#bf0d0d">/{{ select.gunit }}</view>
							<uv-tags v-if="select.price_diff > 0" size="mini" shape="circle" class="tn-ml-xs"
								color="#fff" bgColor="#bf0d0d" borderColor="#bf0d0d"
								:text="`已优惠 ${select.price_diff} 元`" />
							<view class="flex-1"></view>
						</view>
						<view class="flex-x ta-desc-color tn-mt-sm" style="font-size:25rpx;">
							<view class="nowrap">已选择：</view>
							<view class="nowrap tn-mr-xs" v-for="xx in check" :key="xx.unid">{{ xx.name }}</view>
						</view>
					</view>
				</view>
				<view class="tn-p-sm tn-radius tn-mt-sm tn-white_bg tn-shadow-md">
					<!-- 商品规格 -->
					<scroll-view scroll-y="true" style="max-height:40vh">
						<view v-for="(s, i) in goods.specs" :key="s.unid" class="flex-y tn-mb-sm">
							<uv-text :text="s.name" :bold="true" margin="0 0 0 8rpx" />
							<view class="flex-x tn-mt-xs flex-wrap tn-text-sm">
								<view v-for="(ss, ii) in s.list" :key="ss.unid" if-show="ss.show && ss.check"
									class="tn-pr-xs tn-mb-xs">
									<uv-button shape="circle" plain @click="setSpec(i, ii)" :text="ss.name"
										:type="ss.select ? 'error' : 'info'"
										customStyle="font-size:24rpx;height:45rpx;padding:20rpx 15rpx" />
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 购买数量 -->
					<view class="flex-align-center flex-x-between tn-mt-xs" style="height:80rpx;">
						<!-- <uv-text text="数量" :bold="true" /> -->
						<view v-if="nummax > 0">
							<uv-number-box :min="1" :max="nummax" :v-model="specsNum[select.ghash] || number" />
						</view>
						<view v-else class="tn-p-sm">
							<text class="tn-red_text tn-text-sm">已售完</text>
						</view>
						<view class="tn-p-sm">
							<uv-button @click="confirmCart" shape="circle" type="error"
								customStyle="width:180rpx;height:55rpx;" text="加入购物车" />
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script lang="ts">
	import { defineComponent } from 'vue'
	import { TaMd5, TaDataBase, TaLoading, TaDataOrder, TaToast, TaDataGoods, TaDataUser, TaDataStore } from '@/utils';
	export default defineComponent({
		data() {
			return {
				code: <string>'',
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				nomore: false,
				nodata: false,
				st: 0,
				cartListShow: false,
				buydialogShow: false,
				harr: [],
				business: {},
				datalist: [],
				cartList: {},
				specsNum: {},
				numtotal: [],
				numCat: {},
				proid: '',
				totalprice: 0.00,
				totalpricePack: 0.0,
				minprice: 0.00,
				currentActiveIndex: 0,
				animation: true,
				scrollToViewId: "",
				commentlist: [],
				comment_nodata: false,
				comment_nomore: false,
				goods: <any>{},
				select: <any>{},
				isLogin: <boolean>TaDataUser.isLogin(),
				ghash: <string>'',
				specs: <any>{},
				check: <any[]>[],
				nummax: <number>999,
				number: <number>1,
			}
		},
		watch: {
			specs: {
				deep: true,
				handler(value : any) {
					let check : any[] = [], unids : any[] = []
					let specs = JSON.parse(JSON.stringify(value))
					// 动态读取规格属性
					specs.forEach((x : any) => x.list.forEach((xx : any) => {
						xx.select && check.push(xx) && unids.push(xx.unid)
					}))
					// 计算商品 GHASH 并同时切换选项
					if ((this.check = check).length > 0) {
						this.setHash(TaMd5(this.goods.code + '#' + unids.sort().join(';')))
					}
				}
			}
		},
		onLoad(options : any) {
			console.log(TaDataUser.isLogin(), 42772);
			this.code = options.code || '';
			if (this.code.length < 1 || this.code.indexOf('G') !== 0) {
				TaToast.error("无效商家编号！").then(() => this.goto.home())
			} else {
				this.loadStore();
			}
		},
		onShow() {
			// 判断用户是否已登录
			this.isLogin = TaDataUser.isLogin();
			this.loadStore();

		},
		onPullDownRefresh() {
			this.loadStore();
			setTimeout(() => uni.stopPullDownRefresh(), 1000)
		},
		onReachBottom() {
			if (this.st == 2) {
				if (!this.comment_nodata && !this.comment_nomore) {
					this.pagenum = this.pagenum + 1;
					this.getCommentList(true);
				}
			}
		},
		methods: {
			// 加载商品数据
			loadStore() {
				var that = this;
				TaLoading.show('加载中...');
				// 加载商家数据
				TaDataStore.withStoreInfo({ code: this.code }).then((ret : any) => {
					if (ret.code == 1) {
						that.business = ret.data.business
						that.datalist = ret.data.data;
						that.cartList = ret.data.cartList;
						that.numtotal = ret.data.numtotal;
						that.numCat = ret.data.numCat;
						that.specsNum = ret.data.specsNum;
						// that.sysset = ret.sysset;
						that.totalprice = parseFloat(ret.data.cartList.totalprice);
						that.totalpricePack = parseFloat(ret.data.cartList.totalpricePack);
						// that.minprice = parseFloat(ret.sysset.min_price);

						//计算每个高度
						var harr = [];
						var clientwidth = uni.getSystemInfoSync().windowWidth;
						var datalist = ret.data.data;
						if (datalist && datalist.length > 0) {
							for (var i = 0; i < datalist.length; i++) {
								var child = datalist[i].prolist;
								harr.push(Math.ceil(child.length) * 200 / 750 * clientwidth);
							}
						}
						that.harr = harr;
					}
				}).finally(() => TaLoading.hide())
			},
			changetab(e) {
				this.st = e.currentTarget.dataset.st;
				this.pagenum = 1;
				this.commentlist = [];
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.getCommentList();
			},
			getCommentList(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.commentlist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				var st = that.st;
				that.loading = true;
				that.comment_nodata = false;
				that.comment_nomore = false;
				app.post('ApiRestaurantTakeaway/getdatalist', { id: that.opt.bid, st: st, pagenum: pagenum }, function (res) {
					that.loading = false;
					uni.stopPullDownRefresh();
					var data = res.data;
					if (pagenum == 1) {
						that.commentlist = data;
						if (data.length == 0) {
							that.comment_nodata = true;
						}
					} else {
						if (data.length == 0) {
							that.comment_nomore = true;
						} else {
							var commentlist = that.commentlist;
							var newdata = commentlist.concat(data);
							that.commentlist = newdata;
						}
					}
				});
			},
			clickRootItem(t) {
				var e = t.currentTarget.dataset;
				this.scrollToViewId = 'detail-' + e.rootItemId;
				this.currentActiveIndex = e.rootItemIndex;
			},
			//加入购物车弹窗后
			afteraddcart(e) {
				e.hasoption = false;
				this.addcart({ currentTarget: { dataset: e } });
			},
			clearShopCartFn() {
				var that = this;
				TaLoading.show('清空中...');
				TaDataOrder.cartClear({ store_id: this.business.id }).then(() => {
					that.$refs.cartList.close();
					that.loadStore();
					TaToast.success('清空成功!');
				}).finally(() => TaLoading.hide());
			},
			// 设置选择对象
			setHash(hash : string) {
				if (this.goods.items.some((x : any, i : number) => x.ghash === hash && (this.gimagei = i, this.select = x))) {
					this.select.price_diff = Number(this.select.price_market) - Number(this.select.price_selling);
					this.select.price_diffs = Number((this.select.price_diff * this.number).toFixed(2));
					this.nummax = Math.min(this.select.stock_total - this.select.stock_sales, 9999);
				}
			},
			gopay() {
				var cartList = this.cartList.list;
				if (cartList.length == 0) {
					TaToast.success('请先添加商品到购物车!');
					return;
				}
				var prodata = [];
				for (var i = 0; i < cartList.length; i++) {
					prodata.push(cartList[i].id);
				}				
				TaDataOrder.add({store_id:this.business.id ,carts: prodata.join(',') })
			},
			gotoCatproductPage(t) {
				var e = t.currentTarget.dataset;
				this.goto('prolist?cid=' + e.id);
			},
			scroll(e) {
				var scrollTop = e.detail.scrollTop;
				var harr = this.harr;
				var countH = 0;
				for (var i = 0; i < harr.length; i++) {
					if (scrollTop >= countH && scrollTop < countH + harr[i]) {
						this.currentActiveIndex = i;
						break;
					}
					countH += harr[i];
				}
			},
			buydialogChange(proid, stock) {
				let that = this;
				that.loading = true;
				// 加载商品数据
				TaDataGoods.withGoods(proid).then((ret : any) => {
					that.goods = ret.data.list[0];
					// 商品规格图片处理
					let gimages : any[] = [], showSpecImage : boolean = true;
					that.goods.items.some((x : any) => {
						if (!x.gimage) return !(showSpecImage = false);
						gimages.push({ image: x.gimage || this.goods.cover, ghash: x.ghash });
					});
					if (that.gimageb = showSpecImage) {
						that.gimages = gimages;
					}
					that.syncSpec(this.ghash);
					that.$refs.specs.open();
				})
			},
			closeSpec() {
				// @ts-ignore
				this.$refs.specs.close();
			},
			// 动态切换规格
			setSpec(i : number, ii : number) {
				this.specs[i].list.forEach((xx : any, _ii : number) => xx.select = ii === _ii)
				this.number = this.specsNum[this.select.ghash]||1;
			},
			// 加入购物车
			confirmCart() {
				TaLoading.show('添加中...')
				TaDataOrder.cartSet({ ghash: this.select.ghash, number: this.number, store_id: this.business.id }).then(() => {
					// @ts-ignore
					this.$refs.specs.close();
					this.number = 1;
					this.loadStore();
					TaToast.success('添加成功!');
				}).finally(() => TaLoading.hide())
			},
			// 初始化选择
			syncSpec(ghash : string) {
				if (ghash) {
					// 自动选中 GHASH 
					let specs : any[] = [];
					this.goods.specs.map((x : any) => {
						x.list.map((xx : any) => xx.select = false)
						specs.push(x.list)
					})
					let isFind = specs.reduce((a, b) => {
						let res : any[] = [];
						return a.map((x : any[]) => b.map((y : any[]) => res.push(x.concat(y)))), res;
					}, [[]]).some((x : any[]) => {
						let unids : any[] = [];
						x.map((y : any) => unids.push(y.unid))
						let hash = TaMd5(this.goods.code + '#' + unids.sort().join(';'));
						if (ghash === hash) return x.map((y : any) => y.select = true), true;
					})
					isFind || TaToast.error('商品规格不存在！')
				}
				if (!ghash) {
					/* 选中默认规格 */
					this.goods.specs.map((x : any) => x.list.map((xx : any, ii : number) => xx.select = ii === 0));
				}
				this.specs = this.goods.specs;
			},
			handleClickMask() {
				this.$refs.cartList.open();
			}
		}
	})
</script>
<style lang="scss">
	page {
		position: relative;
		width: 100%;
		height: 115%;
	}

	.container {
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	.topbannerbg {
		width: 100%;
		height: 264rpx;
		background: #fff;
	}

	.topbannerbg2 {
		position: absolute;
		z-index: 7;
		width: 100%;
		height: 264rpx;
		background: rgba(0, 0, 0, 0.3);
		top: 0
	}

	.topbanner {
		position: absolute;
		z-index: 8;
		width: 100%;
		display: flex;
		padding: 40rpx 20rpx;
		top: 0
	}

	.topbanner .left {
		width: 160rpx;
		height: 160rpx;
		flex-shrink: 0;
		margin-right: 20rpx
	}

	.topbanner .left .img {
		width: 100%;
		height: 100%;
		border-radius: 50%
	}

	.topbanner .right {
		display: flex;
		flex-direction: column;
		padding: 20rpx 0
	}

	.topbanner .right .f1 {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff
	}

	.topbanner .right .f2 {
		font-size: 22rpx;
		color: #fff;
		opacity: 0.7;
		margin-top: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		line-height: 30rpx;
	}

	.topbanner .right .f3 {
		width: 100%;
		display: flex;
		padding-right: 20rpx;
		margin-top: 10rpx
	}

	.topbanner .right .f3 .t2 {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9)
	}

	.topbanner .right .f3 .img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 10rpx
	}

	.navtab {
		display: flex;
		width: 100%;
		height: 110rpx;
		background: #fff;
		position: absolute;
		z-index: 10;
		padding: 0 50rpx;
		border-radius: 24rpx 24rpx 0 0;
		margin-top: -24rpx;
	}

	.navtab .item {
		flex: 1;
		font-size: 32rpx;
		text-align: center;
		color: #222222;
		height: 110rpx;
		line-height: 110rpx;
		overflow: hidden;
		position: relative
	}

	.navtab .item .after {
		display: none;
		position: absolute;
		left: 50%;
		margin-left: -20rpx;
		bottom: 20rpx;
		height: 4px;
		border-radius: 2px;
		width: 40rpx
	}

	.navtab .on {
		font-size: 36rpx;
		font-weight: bold
	}

	.navtab .on .after {
		display: block
	}

	.content1 .item {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 40rpx;
		margin-top: 40rpx
	}

	.content1 .item:last-child {
		border-bottom: 0;
	}

	.content1 .item .t1 {
		width: 200rpx;
		color: #2B2B2B;
		font-weight: bold;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx
	}

	.content1 .item .t2 {
		color: #2B2B2B;
		font-size: 24rpx;
		line-height: 30rpx
	}

	.content2 .comment {
		padding: 0 10rpx
	}

	.content2 .comment .item {
		background-color: #fff;
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
	}

	.content2 .comment .item .f1 {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 10rpx 0;
	}

	.content2 .comment .item .f1 .t1 {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.content2 .comment .item .f1 .t2 {
		padding-left: 10rpx;
		color: #333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.content2 .comment .item .f1 .t3 {
		text-align: right;
	}

	.content2 .comment .item .f1 .t3 .img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx
	}

	.content2 .comment .item .score {
		font-size: 24rpx;
		color: #f99716;
	}

	.content2 .comment .item .score image {
		width: 140rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-bottom: 6rpx;
		margin-right: 6rpx;
	}

	.content2 .comment .item .f2 {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 10rpx 0;
	}

	.content2 .comment .item .f2 .t1 {
		color: #333;
		font-size: 28rpx;
	}

	.content2 .comment .item .f2 .t2 {
		display: flex;
		width: 100%
	}

	.content2 .comment .item .f2 .t2 image {
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx;
	}

	.content2 .comment .item .f2 .t3 {
		color: #aaa;
		font-size: 24rpx;
	}

	.content2 .comment .item .f2 .t3 {
		color: #aaa;
		font-size: 24rpx;
	}

	.content2 .comment .item .f3 {
		width: 100%;
		padding: 10rpx 0;
		position: relative
	}

	.content2 .comment .item .f3 .arrow {
		width: 16rpx;
		height: 16rpx;
		background: #eee;
		transform: rotate(45deg);
		position: absolute;
		top: 0rpx;
		left: 36rpx
	}

	.content2 .comment .item .f3 .t1 {
		width: 100%;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 22rpx;
		color: #888;
		background: #eee
	}

	.view-show {
		background-color: white;
		line-height: 1;
		width: 100%;
		height: 100%;
	}

	.search-container {
		width: 100%;
		height: 94rpx;
		padding: 16rpx 23rpx 14rpx 23rpx;
		background-color: #fff;
		position: relative;
		overflow: hidden;
		border-bottom: 1px solid #f5f5f5
	}

	.search-box {
		display: flex;
		align-items: center;
		height: 60rpx;
		border-radius: 30rpx;
		border: 0;
		background-color: #f7f7f7;
		flex: 1
	}

	.search-box .img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		margin-left: 30rpx
	}

	.search-box .search-text {
		font-size: 24rpx;
		color: #C2C2C2;
		width: 100%;
	}

	.nav_left {
		width: 25%;
		height: 100%;
		background: #F6F6F6;
		overflow-y: scroll;
		padding: 0 0 100rpx 0;
	}

	.nav_left .nav_left_items {
		line-height: 50rpx;
		color: #999999;
		border-bottom: 0px solid #E6E6E6;
		font-size: 24rpx;
		position: relative;
		border-right: 0 solid #E6E6E6;
		padding: 25rpx 30rpx;
	}

	.nav_left .nav_left_items.active {
		background: #fff;
		color: #222222;
		font-size: 28rpx;
		font-weight: bold
	}

	.nav_left .nav_left_items .before {
		display: none;
		position: absolute;
		top: 50%;
		margin-top: -22rpx;
		left: 0rpx;
		height: 44rpx;
		border-radius: 4rpx;
		width: 6rpx
	}

	.nav_left .nav_left_items.active .before {
		display: block
	}

	.nav_left .nav_left_items .cartnum {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 36rpx;
		height: 36rpx;
		border: 1px solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		font-size: 18rpx;
		color: #fff;
		background: linear-gradient(0deg, rgb(253, 74, 70) 0%, rgba(253, 74, 70, 0.8) 100%);
	}

	.nav_right {
		width: 75%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		box-sizing: border-box;
		padding: 0 0 100rpx 0
	}

	.nav_right-content {
		background: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		height: 100%;
		position: relative
	}

	.detail-list {
		height: 100%;
		overflow: scroll
	}

	.classification-detail-item {
		width: 100%;
		overflow: visible;
		background: #fff
	}

	.classification-detail-item .head {
		height: 82rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.classification-detail-item .head .txt {
		color: #222222;
		font-weight: bold;
		font-size: 28rpx;
	}

	.classification-detail-item .head .show-all {
		font-size: 22rpx;
		color: #949494;
		display: flex;
		align-items: center
	}

	.product-itemlist {
		height: auto;
		position: relative;
		overflow: hidden;
		padding: 0px;
		display: flex;
		flex-wrap: wrap
	}

	.product-itemlist .item {
		width: 100%;
		display: inline-block;
		position: relative;
		margin-bottom: 12rpx;
		background: #fff;
		display: flex;
		padding: 14rpx 0;
		border-radius: 10rpx;
		border-bottom: 1px solid #F8F8F8
	}

	.product-itemlist .product-pic {
		width: 30%;
		height: 0;
		overflow: hidden;
		background: #ffffff;
		padding-bottom: 30%;
		position: relative;
		border-radius: 4px;
	}

	.product-itemlist .product-pic .image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto
	}

	.product-itemlist .product-pic .saleimg {
		position: absolute;
		width: 120rpx;
		height: auto;
		top: -6rpx;
		left: -6rpx;
	}

	.product-itemlist .product-info {
		width: 70%;
		padding: 0 10rpx 5rpx 20rpx;
		position: relative;
	}

	.product-itemlist .product-info .p1 {
		color: #323232;
		font-weight: bold;
		font-size: 28rpx;
		line-height: 30rpx;
		margin-bottom: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 60rpx
	}

	.product-itemlist .product-info .p2 {
		margin-top: 10rpx;
		height: 36rpx;
		line-height: 36rpx;
		overflow: hidden;
	}

	.product-itemlist .product-info .p2 .t1 {
		font-size: 32rpx;
	}

	.product-itemlist .product-info .p2 .t2 {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #aaa;
		text-decoration: line-through;
		/*letter-spacing:-1px*/
	}

	.product-itemlist .product-info .p3 {
		display: flex;
		align-items: center;
		overflow: hidden;
		margin-top: 10rpx
	}

	.product-itemlist .product-info .p3-1 {
		font-size: 20rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: right;
		color: #999;
		margin-left: 6rpx;
	}

	.product-itemlist .product-info .p3-1:nth-child(1) {
		margin: 0;
	}

	.product-itemlist .product-info .p4 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		position: absolute;
		display: relative;
		bottom: 6rpx;
		right: 4rpx;
		text-align: center;
	}

	.product-itemlist .product-info .p4 .icon_gouwuche {
		font-size: 28rpx;
		height: 48rpx;
		line-height: 48rpx
	}

	.product-itemlist .addnum {
		position: absolute;
		right: 10rpx;
		bottom: 20rpx;
		font-size: 30rpx;
		color: #666;
		width: auto;
		display: flex;
		align-items: center
	}

	.product-itemlist .addnum .plus {
		width: 40rpx;
		height: 40rpx;
		background: #FD4A46;
		color: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx
	}

	.product-itemlist .addnum .minus {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		color: #FD4A46;
		border: 1px solid #FD4A46;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx
	}

	.product-itemlist .addnum .img {
		width: 24rpx;
		height: 24rpx
	}

	.product-itemlist .addnum .i {
		padding: 0 20rpx;
		color: #999999;
		font-size: 28rpx
	}

	.overlay {
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		width: 60%;
		height: 60%;
		border-radius: 50%;
		display: none;
		top: 20%;
		left: 20%;
	}

	.overlay .text {
		color: #fff;
		text-align: center;
		transform: translateY(100%);
	}

	.product-itemlist .soldout .product-pic .overlay {
		display: block;
	}

	.prolist {
		max-height: 620rpx;
		min-height: 320rpx;
		overflow: hidden;
		padding: 0rpx 20rpx;
		font-size: 28rpx;
		border-bottom: 1px solid #e6e6e6;
	}

	.prolist .nopro {
		text-align: center;
		font-size: 26rpx;
		display: block;
		margin: 80rpx auto;
	}

	.prolist .proitem {
		position: relative;
		padding: 10rpx 0;
		display: flex;
		border-bottom: 1px solid #eee
	}

	.prolist .proitem .pic {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.prolist .proitem .con {
		padding-right: 180rpx;
		padding-top: 10rpx
	}

	.prolist .proitem .con .f1 {
		color: #323232;
		font-size: 26rpx;
		line-height: 32rpx;
		margin-bottom: 10rpx;
		margin-top: -6rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prolist .proitem .con .f2 {
		font-size: 24rpx;
		line-height: 28rpx;
		color: #999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.prolist .proitem .addnum {
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
		font-size: 30rpx;
		color: #666;
		width: auto;
		display: flex;
		align-items: center
	}

	.prolist .proitem .addnum .plus {
		width: 48rpx;
		height: 36rpx;
		background: #F6F8F7;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.prolist .proitem .addnum .minus {
		width: 48rpx;
		height: 36rpx;
		background: #F6F8F7;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.prolist .proitem .addnum .img {
		width: 24rpx;
		height: 24rpx
	}

	.prolist .proitem .addnum .i {
		padding: 0 20rpx;
		color: #2B2B2B;
		font-weight: bold;
		font-size: 24rpx
	}

	.prolist .tips {
		font-size: 22rpx;
		color: #666;
		text-align: center;
		line-height: 56rpx;
		background: #f5f5f5;
	}

	.footer {
		width: 100%;
		background: #fff;
		margin-top: 5px;
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 8;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-top: 1px solid #EFEFEF
	}

	.footer .cart_ico {
		width: 64rpx;
		height: 64rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: linear-gradient(0deg, rgb(253, 74, 70) 0%, rgba(253, 74, 70, 0.8) 100%);
	}

	.footer .cart_ico .img {
		width: 36rpx;
		height: 36rpx;
	}

	.footer .cart_ico .cartnum {
		position: absolute;
		top: -17rpx;
		right: -17rpx;
		width: 34rpx;
		height: 34rpx;
		border: 1px solid #fff;
		background-color: #FD5450;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		font-size: 20rpx;
		font-weight: bold;
		color: #fff
	}

	.footer .text1 {
		height: 100rpx;
		line-height: 100rpx;
		color: #555555;
		font-weight: bold;
		font-size: 30rpx;
		margin-left: 40rpx;
		margin-right: 10rpx
	}

	.footer .text2 {
		font-size: 32rpx;
		font-weight: bold
	}

	.footer .op {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 36rpx;
		font-weight: bold;
		background: linear-gradient(0deg, rgb(253, 74, 70) 0%, rgba(253, 74, 70, 0.8) 100%);
		color: #fff;
		font-size: 28rpx;
		text-align: center
	}

	.layui-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.layui-imgbox-close {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		right: -16rpx;
		top: -16rpx;
		color: #999;
		font-size: 32rpx;
		background: #fff
	}

	.layui-imgbox-close image {
		width: 100%;
		height: 100%
	}

	.layui-imgbox-img {
		display: block;
		width: 200rpx;
		height: 200rpx;
		padding: 2px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.layui-imgbox-img>image {
		max-width: 100%;
	}

	.popup__left {
		position: absolute;
		top: 36rpx;
		left: 34rpx;
		color: #999999;
		font-size: 24rpx
	}

	.popup__left text {
		color: #ff5555;
	}
</style>